import 'assets/scss/layout/layout.scss'
import React,{Suspense} from 'react';
import { Layout,Spin} from 'antd';
import {Route } from 'react-router-dom'
import logoURL from '../assets/images/logo.png';
import routes from "router/router"
import API from "api/Api.js"

import TopBar from './topBar'
import SideNav from './sideNav';
import {
    MenuOutlined,
} from '@ant-design/icons';

const { Header, Content, Sider } = Layout;


class Index extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            collapsed: true,
            openKeys:[],
            logoUrl:"",
            logoName:"",
            curMenuKey:'home'
        };
    }
    componentDidMount(){
        let collapsedSlaveMenu = localStorage.getItem("collapsedSlaveMenu");
        this.setState({
            collapsed:collapsedSlaveMenu=='true'?true:false,
        })

        let serverUrl = localStorage.getItem("serverUrl");
        let serverJson = JSON.parse(serverUrl);
        let key=sessionStorage.getItem("curMode");

        if(serverJson.logo !=""){
            if(key =="em"){
                this.setState({
                    logoUrl:API.HOST+'/mpPhotoSrc/'+serverJson.logo,
                    logoName:serverJson.mtSysName,
                });
            }else{
                this.setState({
                    logoUrl:API.HOST+'/mpPhotoSrc/'+serverJson.logo,
                    logoName:serverJson.name,
                });
            }
        }else{
            if(key =="em"){
                this.setState({
                    logoUrl:logoURL,
                    logoName:"迅微IOT维保管理系统",
                })
            }else{
                this.setState({
                    logoUrl:logoURL,
                    logoName:"迅微IOT监控管理系统",
                })
            }  
        }
    }
    fnToggle = () => {
        let collapsedSlaveMenu = !this.state.collapsed;
        this.setState({
            collapsed: collapsedSlaveMenu,
        });
        localStorage.setItem("collapsedSlaveMenu",collapsedSlaveMenu);
    };
    authorUser=(data,props)=>{
        console.log(props,'.........');
        if(this.state.status){
            return <data.component {...props} />;
        }else{
            // return <Login {...props} />
            return <data.component {...props} />;
        }
    }
    authorUser1 =(props)=>{
        console.log(props,'22222222222');
    }
    render() {
        return (
            <Layout>
                <Header className="top-head">
                    <TopBar></TopBar>
                </Header>
                <Header className='left-head'>
                    <div style={{marginLeft: '32px'}} >
                        <MenuOutlined className="trigger" onClick={ this.fnToggle} style={{fontSize: '22px', color: '#fff'}}></MenuOutlined>
                    </div>
                    <div className="logo" style={{'float':'right','marginTop':'-68px'}}>
                        <img src={this.state.logoUrl } />
                        <span>{this.state.logoName}</span>
                    </div>
                </Header>
                <Sider 
                    trigger={null} 
                    collapsible 
                    collapsed={this.state.collapsed} 
                    className='side-nav'
                >
                    <SideNav></SideNav>
                </Sider>
                <Layout 
                    className={!this.state.collapsed?'right-layout':'right-layout-collapsed'}
                >
                    <Content>
                            <div  className='content-main'>
                                <Suspense 
                                    fallback={ 
                                        <div style={{display:'flex',justifyContent:'center',alignItems:'center',height:"100vh"}}>
                                            <Spin size="large" tip="页面加载中...">
                                            </Spin>
                                        </div>
                                    }
                                >
                                    {
                                        routes.map((item, index) => {
                                            return <Route 
                                                key={index} 
                                                path={item.path}
                                                exact
                                                strict
                                                render={props =>this.authorUser(item,props)}
                                            />
                                        })
                                    }
                                    <Route exact strict render={props =>this.authorUser1(props)}>
                                    </Route>
                                </Suspense>
                            </div>
                        </Content>
                </Layout>
            </Layout>
        )
    }
}

export default Index;